<template>
	<div class="login_container">
		<div class="login_box" v-if="login==true">
			<span>学校教室在线管理系统</span>
			<!--表单-->
			<el-form ref="login_form" :model="login_form" :rules="rules" class="login_form">
				<el-form-item prop="account">
					<el-input placeholder="请输入学号/工号" prefix-icon="el-icon-user-solid" v-model="login_form.account">
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input placeholder="请输入密码" prefix-icon="el-icon-key" v-model="login_form.password" show-password>
					</el-input>
				</el-form-item>

				<el-form-item class="code" prop="code">
					<el-input placeholder="请输入验证码" prefix-icon="el-icon-warning-outline" v-model="login_form.code" style="width: 180px;"></el-input>
					<el-image :src="img"
						onclick="this.src='http://localhost:9999/kaptcha/kaptcha?d='+new Date()*1" ref="img"></el-image>
				</el-form-item>
					
				
				<el-form-item class="login_btns myButton">
					<el-button type="primary" @click="submitForm('login_form')">登录</el-button>
					<el-button type="infor" @click="resetForm('login_form')">重置</el-button>
				</el-form-item>
			</el-form>
			<span style="color: white;position: absolute;top: 195px;left: 460px;font-size: 15px;" v-if="show" @click="change11">忘记密码？</span>
		</div>
		<div class="login_box" v-if="login==false">
			<span>密码重置</span>
			<!--表单-->
			<el-form ref="password_form" :model="password_form" :rules="rules2" class="password_form">
				
				<el-form-item prop="password1">
					<el-input placeholder="请输入新密码" prefix-icon="el-icon-key" v-model="password_form.password1" show-password>
					</el-input>
				</el-form-item>
				<el-form-item prop="password2">
					<el-input placeholder="重复新密码" prefix-icon="el-icon-key" v-model="password_form.password2" show-password>
					</el-input>
				</el-form-item>
			
				<el-form-item prop="code">
					<el-input placeholder="请输入验证码" prefix-icon="el-icon-warning-outline" v-model="password_form.code"></el-input>
				</el-form-item>
					
				
				<el-form-item class="login_btns myButton">
					<el-button type="primary" @click="submitForm1('password_form')">确定</el-button>
					<el-button type="infor" @click="resetForm1('password_form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		setJwtToken
	} from '../../lib/utils.js'
	import {
		login,
		changeCode,
		forget,
		changePassword2,
	} from '../../api/system.js'
	export default {
		name: "Login",
		data() {
			return {
				login_form: {
					account: '',
					password: '',
					code:'',
				},
				password_form:{
					password1:'',
					password2:'',
					code:'',
				},
				show:false,
				login:true,
				rules: {
					account: [{
							required: true,
							message: '请输入学号/工号',
							trigger: 'blur',
						},
						{
							pattern: /^(\d{10}|\d{6}|\d{8})$/,
							message: '请输入正确的账号格式',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					}]
				},
				rules2: {
					password1: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur',
						}
					],
					password2: [{
						required: true,
						message: '请重复密码',
						trigger: 'blur',
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					}]
				},
				img:'http://localhost:9999/kaptcha/kaptcha',
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						login(this.login_form.account, this.login_form.password,this.login_form.code).then(res => {
							if (res.isok) {
								setJwtToken(res.data1);
								this.$router.push('/main');
							}

						}).catch(error => {
							this.login_form.code = '';
							this.img = 'http://localhost:9999/kaptcha/kaptcha?d='+new Date()*1;
							if(error.message=='用户名或者密码输入错误！'){
								this.show  =true;
							}
							this.$message(error.message);

						})

					} else {
						this.$message.error('表单格式不正确');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			
			submitForm1(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if(this.password_form.password1!=this.password_form.password2){
							this.$message('两次密码不一致！');
						}
						changePassword2(this.login_form.account,this.password_form.password1).then(res=>{
							if (res.data1) {
								this.$message('重置成功');
								this.$router.push('/login');
							}
						})
			
					} else {
						this.$message.error('表单格式不正确');
						return false;
					}
				});
			},
			resetForm1(formName) {
				this.$refs[formName].resetFields();
			},
			change11(){
				if(this.login_form.account==''){
					this.$message('账号不能为空');
				}
				forget(this.login_form.account).then(res=>{
					this.login = false;
					this.$message('验证码已发送，请注意查收！')
				}).catch(error=>{
					this.$message(error.message);
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.login_container {
		height: 100%;
	}

	.login_box {
		width: 600px;
		height: 400px;
		border-radius: 15px;
		background-color: #0d335d;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		span {
			color: #fff;
			position: relative;
			left: 29%;
			top: 13%;
			font-size: 24px;
		}
	}

	.login_form, .password_form {
		width: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -30%);

		.el-radio {
			color: #fff;
		}

		.login_btns {
			text-align: center;
		}
		.code{
			position: relative;
			top: -15px;
			
			.el-image{
				position: relative;
				top: 15px;
				left: 20px;
			}
		}
		
		.myButton{
			position: relative;
			top: -15px;
		}
		
	}
</style>
